<template>
  <div class="container">
    <div class="header">
      <h1>🔐 HashiCorp Vault Demo</h1>
      <p>Spring Boot + Vue.js 集成测试界面</p>
      <span class="status" :class="backendStatus ? 'connected' : 'disconnected'">
        {{ backendStatus ? '后端已连接' : '后端未连接' }}
      </span>
    </div>
    
    <div class="content">
      <!-- 连接测试 -->
      <div class="card">
        <h3>🔗 连接测试</h3>
        <p>测试前后端连接状态和基本功能</p>
        <button class="btn" @click="testConnection" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          测试后端连接
        </button>
        <button class="btn" @click="checkHealth" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          健康检查
        </button>
      </div>

      <!-- Vault 机密获取 -->
      <div class="card">
        <h3>🔑 Vault 机密管理</h3>
        <p>从 Vault 获取和显示机密信息</p>
        <button class="btn" @click="getSecrets" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          获取机密信息
        </button>
        <button class="btn" @click="refreshSecrets" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          刷新机密
        </button>
      </div>

      <!-- 数据库连接测试 -->
      <div class="card">
        <h3>🗄️ 数据库连接</h3>
        <p>测试使用 Vault 机密的数据库连接</p>
        <button class="btn" @click="testDatabase" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          测试数据库连接
        </button>
        <button class="btn" @click="getDatabaseInfo" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          获取数据库信息
        </button>
      </div>

      <!-- Vault 管理操作 -->
      <div class="card">
        <h3>⚙️ Vault 管理操作</h3>
        <p>执行 Vault 的管理和配置操作</p>
        <button class="btn" @click="listVaultPaths" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          列出 Vault 路径
        </button>
        <button class="btn" @click="getVaultStatus" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          Vault 状态
        </button>
        <button class="btn" @click="testVaultWrite" :disabled="loading">
          <span v-if="loading" class="loading"></span>
          测试写入 Vault
        </button>
      </div>

      <!-- 结果显示区域 -->
      <div v-if="result" class="result" :class="resultType">
        <strong>{{ resultTitle }}</strong>
        <br><br>
        {{ result }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      loading: false,
      result: '',
      resultType: '',
      resultTitle: '',
      backendStatus: false
    }
  },
  mounted() {
    this.checkBackendStatus()
  },
  methods: {
    async checkBackendStatus() {
      try {
        await axios.get('/api/actuator/health', { timeout: 3000 })
        this.backendStatus = true
      } catch (error) {
        this.backendStatus = false
      }
    },

    async testConnection() {
      this.loading = true
      try {
        const response = await axios.get('/api/actuator/health')
        this.showResult('连接测试成功', JSON.stringify(response.data, null, 2), 'success')
        this.backendStatus = true
      } catch (error) {
        this.showResult('连接测试失败', `错误: ${error.message}`, 'error')
        this.backendStatus = false
      } finally {
        this.loading = false
      }
    },

    async checkHealth() {
      this.loading = true
      try {
        const response = await axios.get('/api/actuator/health')
        this.showResult('健康检查', JSON.stringify(response.data, null, 2), 'success')
      } catch (error) {
        this.showResult('健康检查失败', `错误: ${error.message}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async getSecrets() {
      this.loading = true
      try {
        const response = await axios.get('/api/secrets')
        this.showResult('机密信息获取成功', response.data, 'success')
      } catch (error) {
        this.showResult('获取机密信息失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async refreshSecrets() {
      this.loading = true
      try {
        // 先刷新配置，然后获取机密
        await axios.post('/api/actuator/refresh')
        const response = await axios.get('/api/secrets')
        this.showResult('机密信息刷新成功', response.data, 'success')
      } catch (error) {
        this.showResult('刷新机密信息失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async testDatabase() {
      this.loading = true
      try {
        const response = await axios.get('/api/database/test')
        this.showResult('数据库连接测试', response.data, 'success')
      } catch (error) {
        this.showResult('数据库连接测试失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async getDatabaseInfo() {
      this.loading = true
      try {
        const response = await axios.get('/api/database/info')
        this.showResult('数据库信息', JSON.stringify(response.data, null, 2), 'success')
      } catch (error) {
        this.showResult('获取数据库信息失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async listVaultPaths() {
      this.loading = true
      try {
        const response = await axios.get('/api/vault/paths')
        this.showResult('Vault 路径列表', JSON.stringify(response.data, null, 2), 'success')
      } catch (error) {
        this.showResult('获取 Vault 路径失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async getVaultStatus() {
      this.loading = true
      try {
        const response = await axios.get('/api/vault/status')
        this.showResult('Vault 状态', JSON.stringify(response.data, null, 2), 'success')
      } catch (error) {
        this.showResult('获取 Vault 状态失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    async testVaultWrite() {
      this.loading = true
      try {
        const testData = {
          testKey: 'testValue',
          timestamp: new Date().toISOString()
        }
        const response = await axios.post('/api/vault/write', testData)
        this.showResult('Vault 写入测试', JSON.stringify(response.data, null, 2), 'success')
      } catch (error) {
        this.showResult('Vault 写入测试失败', `错误: ${error.message}\n${error.response?.data || ''}`, 'error')
      } finally {
        this.loading = false
      }
    },

    showResult(title, content, type) {
      this.resultTitle = title
      this.result = content
      this.resultType = type
    }
  }
}
</script>